<template>
	<view class="factory-page">
    <TopBar
        left-icon="/static/user.png"
        scan-icon="/static/saoyisao.png"
        menu-icon="/static/menu.png"
        @menu="toggleMenu"
    />

        <scroll-view scroll-y class="form-scroll">
            <view class="back-row" @click="goBack">
                <image class="back-arrow-icon" src="/static/left.png" mode="aspectFit"></image>
            </view>
			<view class="header">
				<text class="title">Factory Profile</text>
				<text class="subtitle">Section 1. Basic Information</text>
			</view>

			<view class="form-item">
				<text class="label">Factory Name</text>
				<input class="input" placeholder="Name" />
			</view>
			<view class="form-item">
				<text class="label">Register number</text>
				<input class="input" placeholder="Number" />
			</view>
            <view class="form-item">
                <text class="label">Country</text>
                <picker class="picker" mode="selector" :range="countries" @change="onCountryChange">
                    <view class="picker-text">{{ form.country || 'Country' }}</view>
                    <image class="chevron-icon" src="/static/down.png" mode="aspectFit"></image>
                </picker>
            </view>
            <view class="form-item">
                <text class="label">City</text>
                <picker class="picker" mode="selector" :range="cities" @change="onCityChange">
                    <view class="picker-text">{{ form.city || 'City' }}</view>
                    <image class="chevron-icon" src="/static/down.png" mode="aspectFit"></image>
                </picker>
            </view>
            <view class="form-item">
                <text class="label">Main Product</text>
                <picker class="picker" mode="selector" :range="products" @change="onProductChange">
                    <view class="picker-text picker-text-dark">{{ form.product || 'Apparel' }}</view>
                    <image class="chevron-icon" src="/static/down.png" mode="aspectFit"></image>
                </picker>
            </view>
            <view class="form-item">
                <text class="label">Annual production capacity</text>
                <picker class="picker" mode="selector" :range="capacities" @change="onCapacityChange">
                    <view class="picker-text picker-text-dark">{{ form.capacity || '<100k' }}</view>
                    <image class="chevron-icon" src="/static/down.png" mode="aspectFit"></image>
                </picker>
            </view>
            <view class="form-item">
                <text class="label">Number of employees</text>
                <picker class="picker" mode="selector" :range="employees" @change="onEmployeesChange">
                    <view class="picker-text picker-text-dark">{{ form.employees || '<100' }}</view>
                    <image class="chevron-icon" src="/static/down.png" mode="aspectFit"></image>
                </picker>
            </view>
            <view class="form-item">
                <text class="label">Website</text>
                <picker class="picker" mode="selector" :range="webOptions" @change="onWebsiteChange">
                    <view class="picker-text">{{ form.website || 'www.' }}</view>
                    <image class="chevron-icon" src="/static/down.png" mode="aspectFit"></image>
                </picker>
            </view>

			<button class="next-btn" @click="goToFactoryInfo">Next</button>
        </scroll-view>

        <AccountMenu
            v-if="showMenu"
            :style="{ '--anchor-top': '70px', '--anchor-right': '0px' }"
            @close="showMenu = false"
            @select="() => showMenu = false"
        />
	</view>
</template>

<script setup>
import TopBar from '@/components/TopBar.vue';
import AccountMenu from '@/components/AccountMenu.vue';
import { ref } from 'vue';
const goBack = () => {
    uni.navigateTo({
        url: '/pages/person/person'
    });
};
const showMenu = ref(false);
const toggleMenu = () => { showMenu.value = !showMenu.value; };

// 选择器数据与状态
const countries = ['China','Portugal','Italy','USA'];
const cities = ['Shenzhen','Shanghai','Lisbon','Milan'];
const products = ['Apparel','Footwear','Accessories'];
const capacities = ['<100k','100k-500k','500k-1M','>1M'];
const employees = ['<100','100-500','500-1000','>1000'];
const webOptions = ['www.','http://','https://'];
const form = ref({ country: '', city: '', product: '', capacity: '', employees: '', website: '' });

const onCountryChange = (e) => { form.value.country = countries[e.detail.value]; };
const onCityChange = (e) => { form.value.city = cities[e.detail.value]; };
const onProductChange = (e) => { form.value.product = products[e.detail.value]; };
const onCapacityChange = (e) => { form.value.capacity = capacities[e.detail.value]; };
const onEmployeesChange = (e) => { form.value.employees = employees[e.detail.value]; };
const onWebsiteChange = (e) => { form.value.website = webOptions[e.detail.value]; };

const goToFactoryInfo = () => {
    uni.navigateTo({
        url: '/pages/factory/factory-certification'
    });
};
</script>

<style lang="scss">
.factory-page { min-height: 100vh; background: linear-gradient(180deg, #d9f0ff 0%, #e9f9ed 100%); }
.form-scroll { margin-top: 60px; padding: 0 16px; box-sizing: border-box; }
.back-row { margin: 12px 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.back-arrow-icon { 
    width: 32px; 
    height: 32px; 
}
.header { margin-bottom: 8px; }
.title { font-size: 22px; font-weight: 800; color: #0b1e2a; }
.subtitle { display: block; margin-top: 6px; color: #3b5560; font-size: 14px; }
.form-item { margin-top: 16px; }
.label { display: block; margin-bottom: 8px; color: #23323a; font-size: 14px; }
.input { width: 100%; height: 44px; background: #fff; border-radius: 10px; padding: 0 14px; box-sizing: border-box; }
.picker { position: relative; width: 100%; height: 44px; background: #fff; border-radius: 10px; padding: 0 14px; display: flex; align-items: center; box-sizing: border-box; }
.picker-text { color: #9aa3a7; }
.picker-text-dark { color: #000; }
.chevron-icon { 
    position: absolute; 
    right: 12px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 16px; 
    height: 16px; 
}
.next-btn { margin: 24px 8px 40px; height: 44px; background: #222; color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
</style>

